<template>
  <div>
      <el-dialog :before-close="cancel" :title="info.isAdd ? '添加轮播图' : '编辑轮播图'" :visible.sync="info.isShow" center>
          <el-form ref="bannerForm" :model="bannerForm" :rules="rules">
              <el-form-item label="标题" :label-width="formLabelWidth" prop="title">
                  <el-input autocomplete="off" v-model="bannerForm.title"></el-input>
              </el-form-item>
              <el-form-item label="图片" :label-width="formLabelWidth">
                  <el-upload action="#" list-type="picture-card" :on-preview="onPreview" :on-remove="onRemove"
                      :auto-upload="false" :on-change="changeImg" :file-list="filelist" :limit="1"
                      :on-exceed="onExceed">
                      <i class="el-icon-plus"></i>
                  </el-upload>
                  <el-dialog :visible.sync="dialogVisible">
                      <img width="100%" :src="imgUrl" alt="">
                  </el-dialog>
              </el-form-item>
              <el-form-item label="状态" :label-width="formLabelWidth">
                  <el-switch v-model="bannerForm.status" active-color="#13ce66" inactive-color="#ff4949"
                      :active-value="1" :inactive-value="2">
                  </el-switch>
              </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
              <el-button @click="cancel">取 消</el-button>
              <el-button type="primary" @click="comfirm">确 定</el-button>
          </div>
      </el-dialog>
  </div>
</template>

<script>
// 引入接口
import { bannerAdd, bannerEdit, bannerInfo } from '../../request/api'
// 引入辅助性函数
import { mapActions, mapGetters } from 'vuex'
export default {
  props: ['info'],
  data() {
      return {
          formLabelWidth: '90px',
          bannerForm: {
              title: '',
              img: '',
              status: 1,
          },
          rules: {
              title: [
                  { required: true, message: '请输入轮播图标题', trigger: 'blur' },
                  { min: 2, max: 6, message: '长度在 2 到 6 个字符', trigger: 'blur' }
              ],
          },
          // 图片预览一开始的值给false
          dialogVisible: false,
          imgUrl: '',
          // 图片回显
          filelist: []
      }
  },
  mounted() {
      // 先判断轮播图列表有数据没有，有的话就不触发行动，没有的话再触发行动
      if (this.bannerlist == 0) {
          this.getBanner()
      }
  },
  computed: {
      ...mapGetters({
          bannerlist: 'banner/getBannerList'
      })
  },
  methods: {
      //文件限制方法
      onExceed(files, fileList) {
          this.$message.warning(
              `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length
              } 个文件`
          );
      },
      onPreview(file) {
          console.log(file, '上传');
          this.imgUrl = file.url
          // 打开图片预览弹框
          this.dialogVisible = true
      },
      onRemove(file, filelist) {
          console.log(file, filelist, '移除');
      },
      changeImg(file, filelist) {
          console.log(file, 'change时的文件');
          // 把文件详情赋值给图片地址
          this.bannerForm.img = file.raw;
      },
      ...mapActions({
          getBanner: 'banner/changeBannerAction',
      }),
      // 重置
      rest() {
          this.bannerForm = {
              title: '',
              img: '',
              status: 1,
          }
          // 清空验证规则
          this.$refs.bannerForm.resetFields()
          // 清空图片预览
          this.filelist = []
      },
      // 取消
      cancel() {
          // 关闭弹框
          this.$emit('cancel', false)
          // 调用重置
          this.rest()
      },
      lookup(id) {
          // console.log(uid,'编辑uid');
          bannerInfo({ id }).then(res => {
              console.log(res, '编辑');
              if (res.code == 200) {
                  this.bannerForm = res.list
                  this.bannerForm.id = id
                  // 对图片进行回显
                  this.filelist = this.bannerForm.img ? [{ url: this.bannerForm.img }] : []
              }
          })
      },
      // 确认
      comfirm() {
          this.$refs.bannerForm.validate(async flag => {
              if (flag) {
                  if (this.info.isAdd) {
                      // console.log('添加');
                      let res = await bannerAdd(this.bannerForm)
                      if (res.code == 200) {
                          this.$message.success(res.msg)
                          // 关闭弹框
                          this.cancel();
                          // 触发列表行动
                          this.getBanner();
                      }else{
                          this.$message.error(res.msg)
                      }
                      // console.log(res,'添加');
                  } else {
                      // console.log('编辑');
                      bannerEdit(this.bannerForm).then(res => {
                          console.log(res, '编辑成功');
                          if (res.code == 200) {
                              this.$message.success(res.msg)
                              // 关闭弹框
                              this.cancel()
                              // 重新触发行动
                              this.getBanner()
                          }else{
                              this.$message.error(res.msg)
                          }
                      })
                  }
              } else {
                  console.log('验证失败');
              }
          })
      }
  }
};
</script>

<style scoped>
</style>
